<template>
            <div class="section-3">
                <div class="ant-tabs-nav">
                    <div class="ant-tabs-nav-1">
                        <div :class="{ 'ant-tabs-tab-active': showIndex === 1 }"
                          @click="changeTab(1)">课程描述</div>
                        <div :class="{ 'ant-tabs-tab-active': showIndex === 2 }"
                        @click="changeTab(2)">目录</div>
                        <div :class="{ 'ant-tabs-tab-active': showIndex === 3 }"
                        @click="changeTab(3)">评论</div>
                    </div>
                </div>
                <div class="ant-tabs-content">
                    <div v-show="showIndex === 1" class="jianjie">
                        <!-- <p>{{res.data.courseDetail}}</p> -->
                        <p>{{ cleanCourseDetail }}</p>
                    </div>
                    <div v-show="showIndex === 2" class="mulu" >
                        <div class="course-bottom">
                            <div class="course-section" v-for="item in res.data.sections" :key="item.sectionId">
                                <h3>{{item.sectionName}}</h3>
                                <dl class="">
                                    <dt v-for="item_1 in item.subSections" :key="item_1.sectionId">
                                        <div class="section-title">{{item_1.sectionName}}</div>
                                        <div class="section-action">试看</div>
                                    </dt>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div v-show="showIndex === 3" class="pinglun" >
                       <div class="sec-3">
                            <p>评论</p>
                            <ul class="sec-3-img">
                                <li>
                                    <img src="../image/黄色星星.png" alt="" width="20px" height="20px">
                                </li>
                                <li>
                                    <img src="../image/黄色星星.png" alt="" width="20px" height="20px">
                                </li>
                                <li>
                                    <img src="../image/黄色星星.png" alt="" width="20px" height="20px">
                                </li>
                                <li>
                                    <img src="../image/黄色星星.png" alt="" width="20px" height="20px">
                                </li>
                                <li>
                                    <img src="../image/黄色星星.png" alt="" width="20px" height="20px">
                                </li>
                                <li style="font-size: 12px;">非常好</li>
                            </ul>
                       </div>
                       <div class="sec-2">
                         <textarea name="" id="" placeholder="请发表您对课程的评价"></textarea>
                         <button>发表评论</button>
                       </div>
                       <hr style="margin-top: 70px;margin-bottom: 20px ; height: 1px; color: #8f8f91;">
                       <div class="comment-detail">
                        <div class="comment-detail-list">
                            <div style="width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0!important;">
                                <span class="ant-avatar">
                                    <img src="https://oos-hazz.ctyunapi.cn/online-course/userAvatar/1362/touristappid.o6zAJs_XnhNziIflF1YJerOa4DgQ.SN31VjzeE8wl2622e17ce64aa5d9980bf2c5999e80f4-1364464254509383680.jpg" alt="">
                                </span>
                                <span class="avatar-text">莫笑无望</span>
                            </div>
                            <div style=" width: 540px;">
                                <ul class="sec-3-img">
                                    <li>
                                        <img src="../image/黄色星星.png" alt="" width="20px" height="20px">
                                    </li>
                                    <li>
                                        <img src="../image/黄色星星.png" alt="" width="20px" height="20px">
                                    </li>
                                    <li>
                                        <img src="../image/黄色星星.png" alt="" width="20px" height="20px">
                                    </li>
                                    <li>
                                        <img src="../image/黄色星星.png" alt="" width="20px" height="20px">
                                    </li>
                                    <li>
                                        <img src="../image/黄色星星.png" alt="" width="20px" height="20px">
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="sec-4">
                              <div   style="padding: 10px 0px 10px 40px!important;">
                                老师讲的很详细，很清晰，很有帮助，谢谢老师！
                            </div>
                        </div>
                        <div class="sec-5" style="float: right;">
                            <div>
                                <span>2024-01-01 12:00:00</span>
                                <span>回复</span>
                            </div>
                        </div>
                        <hr style="margin-top: 100px;margin-bottom: 20px ; height: 1px; color: #8f8f91;">
                        <div class="sec-6">
                            <ul>
                                <li></li>
                                <li>1</li>
                                <li>></li>
                            </ul>
                        </div>
                       </div>
                    </div>
                </div>
            </div>
</template>

<script>
import { getCourseDetail } from '@/api/request';


export default {
name: 'sectionView',
props: {

},
data() {
    return {
        res:{
            data: {
            courseDetail: '',
            courseSections: [],
        },
        },
        showIndex:1,
        courseId:''
    };
},
computed: {
    cleanCourseDetail() {
      // 创建一个临时的 div 元素
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = this.res.data.courseDetail;
      // 获取纯文本内容
      return tempDiv.textContent || tempDiv.innerText || '';
    }
  },
created() {
     this.courseId = this.$route.query.courseId;
    getCourseDetail(this.courseId)
        .then(data => {
          // 确保返回的数据结构正确
          if (data) {
            this.res = data;
          }
        })
        .catch(error => {
          console.error('获取课程数据失败:', error);
        });
},
methods: {
    changeTab(index) {
        // console.log('点击 tab，切换到索引：', index);
      this.showIndex = index;
    //   console.log('当前 showIndex 值：', this.showIndex);
    },
}
}
</script>

<style scoped lang="scss">
        .section-3 {
        width: 1160px;
        background-color: #fff;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 0;
        color: rgba(0, 0, 0, .65);
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5;
        list-style: none;
        font-feature-settings: "tnum";
        position: relative;
        overflow: hidden;
        zoom: 1; 
        padding: 0 10px;
        margin-top: 20px;
        border-radius: 3px;
        .ant-tabs-nav{
            width: 1120px;
            height: 44px;
            margin: 0 auto;
            padding: 0;
            background-color: #fff;
            color: rgba(0, 0, 0,.65);
            text-align: center;
             border-bottom: 1px solid #8f8f91;

            .ant-tabs-nav-1 {
                width: 272px;
                height: 44px;
                margin: 0 auto;
                padding: 0;
                position: relative;
                display: flex;

                .ant-tabs-tab-active {
                    color: #00cf8c;
                    text-shadow: 0 0 .25px currentColor;
                    border-bottom:2px solid #00cf8c;
                }
                :first-child,
                :nth-child(2),
                :last-child {
                    position: relative;
                    height: 100%;
                    margin: 0 10px 0 0;
                    padding: 10px 16px;
                    text-decoration: none;
                    cursor: pointer;
                    font-size: 14px;
                }
                
            }
        }
       .ant-tabs-content {
        background-color: #fff;
        margin-left: 0%;
        width: 100%;
        display: flex; 
        flex-direction: row;
        transition: margin-left .3s cubic-bezier(.645,.045,.355,1);
        will-change: margin-left;

        :first-child {
            width: 100%;
            opacity: 1;
            transition: opacity .45s;
            flex-shrink: 0;
            color: rgba(0, 0, 0, .65);
            font-variant: tabular-nums;
            line-height: 1.5;
            list-style: none;
            padding: 30px;
           p{
            padding: 0px;
            color: rgba(0, 0, 0, .65);
            font-size: 14px;
            font-variant: tabular-nums;
            line-height: 1.5;
           } 
        }
        .mulu {
            width: 100%;
            opacity: 1;
            transition: opacity .45s;
            flex-shrink: 0;
            color: rgba(0, 0, 0, .65);
            font-variant: tabular-nums;
            line-height: 1.5;
            list-style: none;
            padding: 30px;
            .course-bottom{
                .course-section {
                    h3 {
                        font-weight: 700;
                        padding:0px;    
                    }
                    dl {
                        margin: 0;
                        padding: 0;
                        dt {
                            height: 50px;
                            line-height: 30px;
                            padding: 10px 20px;
                            background: #f2f2f2;
                            margin: 10px 0;
                            .section-title {
                                width: 70%;
                                float: left;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                padding: 0;
                                font-size: 14px;
                                list-style: none;
                            }
                            .section-action {
                                width: 30%;
                                float: left;
                                padding: 0;
                                margin-right: 0px;
                                text-align: right;
                           }
                        }
                    }
                    
                }
            }
        }
        .pinglun {
           .sec-3 {
                width:1080px !important;
                height: 71px;
                margin: 30px;
                padding: 0!important;
                position: relative;
                p {
                    font-size: 14px;
                    color: rgba(0, 0, 0, .65);
                }
                .sec-3-img {
                    // width: 200px;
                    display: flex;
                    flex-direction: row;
                    padding: 0!important;
                    li {
                        width: 40px !important;
                        height: 30px!important;
                        padding: 0!important;
                    };
                     img {
                        width: 20px!important;
                        height: 20px!important;
                        margin-right: 10px;
                        padding: 0!important;
                    }
                }
           } 
           .sec-2 {
            textarea {
                height: 135.333px;
                min-height: 135.333px;
                max-height: 135.333px;
                overflow-y: hidden;
            }
            button {
                color: #fff;
                background-color: #00cf8c;
                border-color: #00cf8c;
                text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
                box-shadow: 0 2px 0 rgba(0, 0, 0, .045);
                float: right;
                margin: 20px 0 0;
                border: 1px solid transparent;
            }
           }
           .comment-detail {
            .comment-detail-list {
                display: flex;
                justify-content: space-between;
                -webkit-box-pack: justify;
                -webkit-box-align: center;
                align-items: center;
                .ant-avatar {
                    font-feature-settings: "tnum";
                    position: relative;
                    display: inline-block;
                    overflow: hidden;
                    color: #fff;
                    white-space: nowrap;
                    text-align: center;
                    width: 32px;
                    height: 32px;
                    line-height: 32px;
                    border-radius: 50%;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0!important;
                    img {
                        padding: 0!important;
                        display: block;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .avatar-text {
                    color: rgba(0, 0, 0, .65);
                    font-size: 14px;
                    font-variant: tabular-nums;
                    line-height: 1.5;
                    list-style: none;
                }
                .sec-3-img {
                    display: flex;
                    flex-direction: row;
                    padding: 0!important;
                    margin-left: 350px;
                    li {
                        width: 40px !important;
                        height: 30px!important;
                        padding: 0!important;
                    };
                     img {
                        width: 20px!important;
                        height: 20px!important;
                        margin-right: 10px;
                        padding: 0!important;
                    }
                }
            }
           }
           .sec-6 {
                width: 120px;
                height: 48px;
                margin: 0 auto;
                // background-color: #0f141a;
                ul {
                    padding: 0!important;
                    margin-bottom: 20px!important;
                    // float: left;
                    display: flex;
                    li {
                        width: 32px!important;
                        height: 32px!important;
                        padding: 0!important;
                        margin-right: 8px;
                        border: 1px solid #9f9f9f;
                        line-height: 32px;
                        text-align: center;
                    }
                    :nth-child(2) {
                        border:1px solid #00cf8c;
                        color: #00cf8c;
                    }
                }
           }
        }
       }
    }
</style>
